<template>
  <div class="search">
    <Card>
      <Row class="table-page-search-wrapper">
        <Form ref="searchForm" :model="pageParams" inline :label-width="100">
          <FormItem label="角色名称" prop="roleName">
            <Input type="text" v-model="pageParams.roleName" placeholder="请输入角色名称"/>
          </FormItem>
          <FormItem label="角色编码" prop="roleCode">
            <Input type="text" v-model="pageParams.roleCode" placeholder="请输入角色编码"/>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearch(1)">查询</Button>&nbsp;
            <Button @click="handleResetForm('searchForm')">重置</Button>
          </FormItem>
        </Form>
      </Row>
      <Row class="table-operator">
        <ButtonGroup>
          <Button
            :disabled="$auth('systemRoleEdit')?false:true"
            class="search-btn"
            type="primary"
            @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
      </Row>
      <Row>
        <s-table :url="$apis.role.page" :columns="columns" :params="pageParams" ref="table">
          <template slot="status" slot-scope="{ row }">
            <Tag v-if="row.status===1" color="success">正常</Tag>
            <Tag v-else="" color="error">禁用</Tag>
          </template>
          <template slot="action" slot-scope="{ row }">
            <Button
              size="small"
              type="text"
              @click="handleModal(row)"
              :disabled="row.roleCode != 'all' && $auth('systemRoleEdit')?false:true">编辑</Button>
            <Button
              size="small"
              type="text"
              @click="handleRemove(row)"
              :disabled="row.roleCode != 'all' && $auth('systemRoleEdit')?false:true">删除</Button>
          </template>
        </s-table>
      </Row>
    </Card>
    <role-modal ref="roleModal" @reloadTable="handleSearch"></role-modal>
  </div>
</template>

<script>
import RoleModal from './modal'
export default {
  name: 'SystemRole',
  components: { RoleModal },
  data () {
    return {
      pageParams: {
        roleCode: '',
        roleName: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '角色名称',
          key: 'roleName'
        },
        {
          title: '角色编码',
          key: 'roleCode'
        },
        {
          title: '状态',
          slot: 'status',
          key: 'status',
          filters: [
            {
              label: '禁用',
              value: 0
            },
            {
              label: '正常',
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 0) {
              return row.status === 0
            } else if (value === 1) {
              return row.status === 1
            }
          }
        },
        {
          title: '描述',
          key: 'roleDesc'
        },
        {
          title: '更新时间',
          key: 'updateTime'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 150
        }
      ]
    }
  },
  methods: {
    handleModal (data) {
      this.$refs['roleModal'].handleShow(data)
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    },
    handleSearch () {
      this.$refs['table'].search()
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.role.remove, {
        roleId: data.roleId
      }, this).then(res => {
        this.handleSearch()
      })
    }
  },
  mounted: function () {
    this.handleSearch()
  }
}
</script>
